<template>
    <div>
      <p>{{$route.params.id}}</p>
      <ul>
        <li>id: {{messageDetails.id}}</li>
        <li>title: {{messageDetails.title}}</li>
        <li>content: {{messageDetails.content}}</li>
      </ul>
    </div>
</template>

<script>

  export default {
    data () {
      return {
        messageDetails: {}
      }
    },
    mounted () {
      setTimeout(() => {
        const allMessageDetails = [
          {
            id: 1,
            title: 'message01',
            content: 'message01 content'
          },
          {
            id: 2,
            title: 'message02',
            content: 'message02 content'
          },
          {
            id: 3,
            title: 'message03',
            content: 'message03 content'
          }
        ]
        this.allMessageDetails = allMessageDetails
        // this.messageDetails = allMessageDetails.find(detail => true)
        const id = this.$route.params.id * 1
        this.messageDetails = allMessageDetails.find(detail => detail.id===id)
      }, 1000)
    }
  }
</script>

<style>

</style>
